<template>
	<div class="usageTableForm">
		<el-table :data="tableData" style="width: 100%" border>
			<el-table-column prop="date" label="日期" width="180" align="center">
			</el-table-column>
			<el-table-column prop="name" label="姓名" width="180" align="center">
			</el-table-column>
			<el-table-column prop="address" label="地址" align="center">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="100" align="center">
				<template slot-scope="scope">
					<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
					<el-button type="text" size="small">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- //分页 -->
		<el-pagination style="margin: 20px 0;float: right;" @current-change="handleCurrentChange" :current-page="currentPage"
		 :page-sizes="[10]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="count"></el-pagination>
	</div>
</template>

<script>
	//非父子组件传值
	import bus from '../../../static/js/bus.js';
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	export default {
		name: 'usageTableForm',
		components: {},
		computed: {
			...mapGetters(['userInfo', 'api']) //获取
		},
		props: {
			tableData: {//表格数据
				type: Array,
				default: null
			},
			currentPage: {//当前第几页
				type: Number,
				default: 1
			},
			count: {//总条数
				type: Number,
				default: null
			},
		},
		data() {
			return {
				
			};
		},
		watch: {},
		mounted() {},
		methods: {
			//分页
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				let that = this;
				that.currentPage = val;
				this.$emit('changeCurrentPage',val)
			}
		}
	};
</script>

<style scoped="scoped" lang="scss">
</style>
